<template>
    <div class="song_info">
      <div class="tittle">
        <p>歌曲名</p>
        <p>专辑</p>
        <p class="iconfont icon-18erji-2"></p>
      </div>
      <div class="song_info_all">
        <div
          class="song_ii"
          v-for="(index, id) in singer_song.info"
          :key="index.id"
        >
          <div class="info_center">
            <div class="info_center_left">
              <span class="iconfont icon-hear"></span>
              <div class="song_name">
                {{ index.filename }} <span class="iconfont icon-MV" @click="play_mv(index.mvhash)"></span>
              </div>
            </div>
            <div class="info_center_right">
              <span class="iconfont icon-xiazai"></span>
              <span class="iconfont icon-xiangqing"></span>
            </div>
          </div>
          <div class="info_center_song">
            <a href="#">{{ index.album_name }}</a>
          </div>
          <!-- 动态添加类(三元表达式) -->
          <span
            class="iconfont play_ico"
            @click="play(index.hash, index.album_id,index.album_audio_id,id)"
            :class="[
              play_active == id
                ? 'icon-ziyuanldpi'
                : 'icon-24gl-play',
            ]"
          ></span>
        </div>
      </div>
      <!-- 播放盒子 -->
    <play :img="this.list.img" :name="this.list.audio_name" :url="this.list.play_url" v-show="buttom_show"/>
    <!-- mv播放盒子 -->
      <mvplay :mv_img="mv_img" v-show="mv_block"/>
    </div>   
</template>

<script>
import song from "@/store/song";
import { mapState, mapGetters } from "vuex";
export default {
  props: ["singer_song"],
  data() {
    return {
      //播放盒子的显示与隐藏
      buttom_show: false,
      //控制播放键
      play_active: null,
      //中转
      list:{},

      //mv播放url
      mv_img: "",
      //mv播放的显示
      mv_block:false,

    };
  },
  mounted(){
    this.$bus.$on("show_mv",()=>{
      this.mv_block=false
      this.mv_img=''
    })
  },
  methods:{
    //获取歌曲播放信息
    async play(a, b, c,d) {
      await this.$store.dispatch("song_info", {
        hash: a,
        ablumid: b,
        albumaudioid: c,
      });
      this.list=this.song_info
      //控制播放键样式
      this.play_active = d;
      //控制播放盒子的显示与隐藏
      this.buttom_show = true;
    },
    //mv播放
    async play_mv(index) {
      if(index==''){
        alert("此歌曲无mv播放数据")
      }
      await this.$store.dispatch("mv_play", index);
      //数据给予
      this.mv_img = this.mv_play.backupdownurl[0];
      //播放盒子的显示
      this.mv_block=true
    },
    //播放盒子的叉
    nono_play(){
      this.mv_block=false
      this.mv_img=""
    },
    
  },
  computed: {
    ...mapState({
      song_info: (state) => state.song.song,
      mv_play: (state) => state.song.mv_play.sq,
    }),
  },
};
</script>

<style lang="less">
//歌手歌曲列表样式
.song_info {
  // 歌曲头部
  display: block;
  .tittle {
    display: flex;
    font-size: 14px;
    color: #858585;
    margin-bottom: 15px;
    p:nth-child(1) {
      flex: 6;
    }
    p:nth-child(2) {
      flex: 3.5;
    }
    p:nth-child(3) {
      flex: 0.5;
      text-align: end;
    }
  }
  .song_info_all {
    .song_ii {
      height: 50px;
      font-size: 14px;
      display: flex;
      align-items: center;
      border-top: 0.1px solid #edeef1;
      .info_center {
        flex: 6;
        display: flex;
        .info_center_left {
          display: flex;
          justify-content: left;
          align-items: center;
          .song_name {
            width: 100%;
            overflow: hidden;
          }
          span {
            cursor: pointer;
            width: 20px;
            margin-right: 15px;
          }
        }
        .info_center_right {
          display: flex;
          justify-content: end;
          padding-right: 10px;
          span {
            cursor: pointer;
            width: 20px;
            margin-left: 5px;
            margin-right: 5px;
            text-align: center;
            padding-top: 2px;
          }
        }
      }
      a {
        color: #000;
      }
      .info_center_song {
        flex: 3.5;
      }
      .play_ico {
        cursor: pointer;
        flex: 0.5;
        text-align: end;
      }
    }
  }
}

</style>